<template>
	<view>
		<view class="status_bar"> </view>
		<view class="nav">
			<image src="../../static/back.png" mode="" class="back" @click="backto()"></image>
			<view class="category">
				{{category}}
			</view>
		<view class="pick" @click="btnClick()">
			<view style="display: inline-block;">筛选</view>
			<image src="../../static/pick.png" mode=""></image>
		</view>
			<u-popup :show="show" mode="top" @close="close()" @open="open()">
				<view class="nav" style="height: 100rpx;">
					<image src="../../static/back.png" mode="" class="back"  @click="close()"></image>
					<view class="category">
						{{category}}
					</view>
					<view class="pick" @click="btnClick()">
						<view style="display: inline-block;">筛选</view>
						<image src="../../static/pick.png" mode=""></image>
					</view>
				</view>
				<form class="form" @submit="formSubmit">
					<view >
						<radio-group name="radio" class="choose">
							<radio value="all" checked=""/><text>全部</text>
							<radio value="going" /><text>进行中</text>
						</radio-group>
					</view>
					<view @click="cityPick" style="padding-top: 30rpx;display: flex;font-size: 35rpx;">
						<view>地区</view>
						<view style="margin-left: 30rpx;">{{chooseCity}}</view>
					</view>
					<view class="submit">
						<button form-type="submit" type="primary">提交</button>
					</view>
				</form>
			</u-popup>
			<piaoyi-cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirmCity" @cancel="cancel" :visible="city"></piaoyi-cityPicker>
		</view>
		<view class="content">
			<oneActivity v-for="item in activity0" :item="item"></oneActivity>
		</view>
	</view>
</template>

<script>
	import oneActivity from "../../components/oneActivity/oneActivity.vue"
	import config from "../../utils/config";
	export default {
		components:{
			oneActivity,
		},
		onLoad(e) {
			this.getActivity0Date(e.type)
			console.log(e)
			this.type=e.type
			if(this.type==0){
				this.category='官方活动'
			}else if(this.type==1){
				this.category='校园活动'
			}else{
				this.category='个人活动'
			}
		},
		onShow() {
				this.getActivity0Date(this.type);
		},
		data() {
			return {
				range: [
				        { value: 0, text: "5-10" },
				        { value: 1, text: "10-20" },
				        { value: 2, text: "20-50" },
						{ value: 3, text: "50-100" },
						{ value: 4, text: "不限" },
				      ],
				value: 0,
				flag:true,
				pageNum:1,
				type:0,
				maskCloseAble: true,
				rangeValue: [3, 100],
				rangeMin: 3,
				rangMax: 120,
				category:'',
				State1:true,
				State2:false,
				State3:false,
				activity0:[],
				show:false,
				city:false,
				column:2,
				defaultValue:['河南省','郑州市'],
				chooseCity:"河南省郑州市"
			};
		},
		onReachBottom(){
			this.pageNum++;
		},
		methods:{
			// comfirm(e){
			// 	for (let i of e) {
			// 		console.log(i.label);
			// 		this.num = i.label;
			// 	}

			// },
			confirmCity(value){
				console.log(value)
				this.chooseCity=value.name
				this.city=false
			},
			 cancel () {
			                this.city = false
			            },
			cityPick(){
				this.city=true
			},
			backto(){
				uni.switchTab({
					url:'/pages/tribe/index'
				})
			},
			formSubmit(e){
				//暂时还没有关联查询城市，这一块的代码筛选没看明白
				// console.log(e)
				if(e.detail.value.radio=="going"){
					this.AllActivitiesDate()
				}
				else if(e.detail.value.radio=="all"){
					this.getActivity0Date(this.type)
				}
				this.close();
			},
			AllActivitiesDate(){
				const now= new Date();
				this.activity0 = this.activity0.filter(activity => {
				const endTime = new Date(activity.endTime);  
				return endTime > now;  
				});  
			},
			getActivity0Date(type){
				if(type==0){
					uni.request({
						url: config.domain+'activities/querybyclass?type=0',
						success: (res) => {
							console.log(res)
							this.activity0=res.data.result.data
						}
					})
					
				}
				else if(type==1){
					uni.request({
						url: config.domain+'activities/querybyclass?type=1',
						success: (res) => {
							this.activity0=res.data.result.data
						}
					})
				}
				else{
					uni.request({
						url: config.domain+'activities/querybyclass?type=2',
						success: (res) => {
							this.activity0=res.data.result.data
						}
					})
				}
			},
			close() {
				this.show = false
			},
			open() {
			    this.show = true
			},
			btnClick() {
				this.show = true
			},
			onPullDownRefresh() {
			    uni.stopPullDownRefresh()
			}
		}
	}
</script>

<style lang="scss">
	.status_bar {
	        width: 100%;
	    }
.nav{
	width: 100%;
	height: 200rpx;
	position: relative;
	
	.back{
		width: 45rpx;
		height: 50rpx;
		margin-left: 20rpx;
		margin-right: 20rpx;
		position: relative;
		top: 90rpx;
		display: inline-block;
	}
	.category {
		font-weight: bold;
		text-align: center;
		display: inline-block;
		font-size: 32rpx;
		color: #464646; 
		position: absolute;
		top:90rpx;
		right: 320rpx;
	}
	.pick {
		width: 200rpx;
		height: 45rpx;
		display: inline-block;
		position: absolute;
		right: -75rpx;
		top: 185rpx;
		font-size: 25rpx;
		font-weight: bold;
		color: #575757;
		image{
			height: 35rpx;
			width: 35rpx;
			display: inline-block;
			top:15rpx;
			margin-left: 15rpx;
			
		}
	}
	.form{

		height: auto;

		width: 100%;
		font-size: 28rpx;
		font-weight: 550;
		margin-top: 100rpx;
		padding-left: 50rpx;
		padding-bottom: 30rpx;
		.choose{

			// position: absolute;
			// top: 180rpx;

		}
		.submit{
			// position: absolute;
			width: 75%;
			bottom: 10rpx;
			text-align: center;
			padding-top: 30rpx;
			// left: 50%; /* 从左边缘偏移 50% */  
			// transform: translateX(-50%); /* 向左移动自身宽度的 50% 来居中 */

		}
		// .time {
		// 	height: 80rpx;
		// 	line-height: 80rpx;
		// 	padding-left: 20rpx;
		// 	.month {
		// 		background-color: #e2e2e2;
		// 		width: 60rpx;
		// 		height: 45rpx;
		// 		margin-left: 20rpx;
		// 		margin-right: 20rpx;
		// 		font-weight: bold;
		// 	}
		// 	.until {
		// 		display: inline-block;
		// 		margin-left: 25rpx;
		// 		margin-right: 20rpx;
		// 		font-size: 35rpx;
		// 		font-weight: normal;
		// 	}
		// }
		// .location {
		// 	height: 80rpx;
		// 	line-height: 80rpx;
		// 	padding-left: 20rpx;
		// 	.locate {
		// 		display: inline-block;
		// 		color: dimgray;
		// 		image {
		// 			width: 40rpx;
		// 			height: 40rpx;
		// 			position: relative;
		// 			top: 10rpx;
		// 			margin-right: 10rpx;
		// 		}
		// 	}
		// 	.exact {
		// 		display: inline-block;
		// 		color: #696969;
		// 		float: right;
		// 		margin-right: 20rpx;
		// 		font-size: 25rpx;
		// 		switch {
		// 			transform:scale(1,0.7);
		// 		}
		// 	}
		// }
		// .num{
		// 	height: 100rpx;
		// 	// line-height: 50rpx;
		// 	padding-left: 20rpx;
			
		// }
		// .type{
		// 	line-height: 80rpx;
		// 	padding-left: 20rpx;
		// }
	}
}
// .nav{
// 	width: 100%;
// 	height: 80rpx;
// 	background: linear-gradient(to right, #c7ffff, #ffe041);
// 	padding-left: 90rpx;
// 	padding-right: 90rpx;
// 	.oneOf{
// 		display: inline-block;
// 		width: 170rpx;
// 		font-size: 28rpx;
// 		color: dimgrey;
// 		margin-top: 13rpx;
// 		text-align: center;
// 		margin-left: 10rpx;
// 		margin-right: 10rpx;
// 		height: 52rpx;
// 		border-radius: 20rpx;
// 		padding-top: 8rpx;
// 		// background-color: #fff;
// 	}
// 	.active{
// 		background-color: #fff;
// 	}
// 	.noAct{
// 		background-color: transparent;
// 	}
// }
.content{
	width: 750rpx;
	height: 2300rpx;
	margin-top: 30rpx;
	background-color: #fff;
}
</style>
